<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>会员注册—可观艺术网</title>
<link href="../style/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../js/common.js"></script>

<script type="text/javascript">

function submit_register(){

	  var username = $("#username").val().trim();
	  if(!checkMobilePhone(username)){
		  $("#username").focus();
		  alert("请正确填写手机号码。");
		  return false;
	  }

	  var pwd = $("#pwd").val().trim();
	  if( pwd  ==  ""){
		  $("#pwd").focus();
		  alert("请填写密码。");
		  return false;
	  }
	  
	  var emailAddress = $("#emailAddress").val().trim();
	  var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
	  if(emailAddress != "" && !emailReg.test(emailAddress)){
		  $("#emailAddress").val("");
		  $("#emailAddress").focus();
		  alert("电子邮箱格式不正确。");
		  return false;
	  }

	  var agreement = $("#agreement").attr("checked");
	  if( !agreement ){
		  alert("您还未同意可观艺术网协议。");	
		  return false;
	  }

	  $("#registerForm").submit();
}

/**发送短信激活码**/
function sendSmscode(){

	var username = $("#username").val().trim();
	if(!checkMobilePhone(username)){
	  	$("#username").val("");
	    $("#username").focus();
	    alert("请正确填写手机号码。");
		return false;
	}
	
	$.ajax( {
		type : "POST",
		url : "${ctx }/customer/customerAction!fetchSmsCode.do?sms_mobile="+username,
		timeout : 6000,
		async : false, //ajax同步
		success : function(data, textStatus) {
			var result = eval("("+data+")");
			if(result.code == "0000"){
				alert(result.message);
			}else{
				alert(result.message);
			}
		}
	});
}

function init(){

	var errorMessage = '${requestScope.errormessge}';

	if(errorMessage != ''){
		$("#errorMessage").html(errorMessage);
	}

}
</script>

<style type="text/css">
#main{margin: 0 auto;width: 960px;height: 517px;background: url("${ctx}/images/login/bg.jpg");overflow: auto;border: 1px solid #ccc;margin-top: 5px;}
#content{border: 0px solid #ccc;margin: 20px 5px 20px 0px;font-size: 14px;padding-bottom: 20px;}
.style15 {color: #FF6600}
#header{padding-top: 50px;margin-left: 70px;}
#errorMessage{color:red;font-size: 14px;padding-top: 15px;}
.input{border: 1px solid #cccccc;-moz-border-radius: 3px;-webkit-border-radius: 3px;height: 18px;line-height: 17px;padding: 8px 5px 7px;width: 200px;font-size: 14px;}
</style>

</head>

<body onload="init()">

	<%@include file="/commons/head.jsp"%>

<div id="main">
	<div id="header">
  		<div><img src="${ctx }/images/register.gif" style="vertical-align: bottom;"/></div>
  		<div id="errorMessage"></div>
  	</div>
	<div id="content">
		<form action="${ctx }/customer/customerAction!register.do" method="post" id="registerForm" name="registerForm">
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
				<tr><td align="right" style="font-size: 14px;padding: 8px 0px 0px 15px;"><span class="style15">* </span>我的手机号</td>
					<td style="font-size: 14px;padding: 8px 0px 0px 15px;">
						<div style="float: left;">
							<input name="customerInfo.userName" id="username" maxlength="50" size="30" class="input"/>
						</div>
						<div style="padding-top: 5px;padding-left:10px;;float: left;">
							<input type="button" id="btn_smsCode" value="免费获取短信激活码" onclick="sendSmscode()" style="cursor: pointer;padding: 5px 5px;"/>
						</div>
					</td>
				</tr>
				<tr><td></td><td style="font-size: 12px;padding: 3px 0px 10px 18px;color:#9a9a9a">完成注册后，手机号码为您的登录名</td></tr>
				<tr><td class="bt14A" align="right"><span class="style15">* </span>短信激活码</td><td class="bt14A"><input name="sms_code" id="sms_code" maxlength="20" size="30" class="input"/></td></tr>
				<tr><td class="bt14A" align="right"><span class="style15">* </span>创建登录密码</td><td class="bt14A"><input name="customerInfo.passwd" id="pwd" maxlength="20" type="password" size="32" class="input"/></td></tr>
				<tr><td class="bt14A" align="right">找回密码邮箱</td><td class="bt14A"><input name="customerInfo.email" id="emailAddress" maxlength="50" size="30" class="input"/></td></tr>
				<tr><td class="bt14A" align="right"></td>
					<td class="bt14A" style="font-family: 宋体;font-size: 12px;">
					<input type="checkbox" name="agreementCheck" id="agreement" value="agree" checked="checked"/>
					<a href="${ctx }/about/policy.jsp" target="_blank">同意《可观艺术网协议》</a>
				</td></tr>
				<tr>
					<td width="175"></td>
					<td class="bt14A">
						<div style="float: left;">
							<input type="button" value="注  册" onclick="javascript:submit_register();" class="btn_login"/> 
						</div>
						<div style="float: left;padding-left: 50px;height: 34px;line-height: 34px;">
							<a href="${ctx }/u_login.jsp" style="color: blue">登录</a>
					    </div>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>

	<%@ include file="/commons/foot.jsp" %>

</body>
</html>